<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03.serviceWorker</title>
  <style>
    :root {
      font-size: 14px;
    }
    .container {
      margin: 2px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    input {
      height: 36px;
    }
    textarea {
      width: 240px;
      height: 120px;
      padding: 5px;
    }
    .container input, .container textarea {
      font-size: 1.2rem;
    }
    #btn {
      width: 300px;
      height: 36px;
    }
  </style>
</head>
<body>
  <p>
    Service worker 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。
    这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。
    它还提供入口以推送通知和访问后台同步 API。
  </p>
  <div class="container">
    <p id="page"></p>
    <p><label >频道名：<input type="text" id="name" placeholder="请输入名称"  value="myChannel" autocomplete="off"/></label>
      <br>
      <button onclick="craeteChannel()">创建</button> &nbsp;&nbsp; <button onclick="closeChannel()">注销</button>
    </p>
    <p>
      <label >内容：<textarea type="text" id="desc" placeholder="请输入内容" ></textarea></label>
    </p>
    <p><button id="btn" onclick="sendMsg()">提交</button></p>
  </div>
  
  <ul id="ul">

  </ul>

  <script>
    const btn = document.querySelector('#btn'),
          desc = document.querySelector('#desc'),
          channelName = document.querySelector('#name'),
          ul = document.querySelector('#ul'),
          curPage = document.querySelector('#page');

    const pageName = Math.random().toString(36).substr(2,3).toLocaleUpperCase();
    curPage.textContent = pageName;

    const { serviceWorker } = navigator
    serviceWorker.register('./03.serviceWorker.js').then(() => {
      console.log('serviceWorker 注册成功')
    })


    function sendMsg() {
      // channel.postMessage(desc.value);
      serviceWorker.controller.postMessage('hello')
    }

    serviceWorker.onmessage = function({data}) {
      console.log(data)
    }

  </script>
</body>
</html>